﻿<MudGrid>
    <MudItem xs="12" md="6" lg="4">
        <MudChart ChartType="ChartType.Donut" InputData="@Data" InputLabels="@Labels" Width="300px" Height="300px" ChartOptions="@_options1"></MudChart>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudChart ChartType="ChartType.Pie" InputData="@Data" InputLabels="@Labels" Width="300px" Height="300px" ChartOptions="@_options1"></MudChart>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudChart ChartType="ChartType.Line" ChartSeries="@Series1" XAxisLabels="@XAxisLabels" Width="100%" Height="350px" ChartOptions="@_options1"></MudChart>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudChart ChartType="ChartType.Bar" ChartSeries="@Series2" XAxisLabels="@XAxisLabels" Width="100%" Height="350px" ChartOptions="@_options1"></MudChart>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudChart ChartType="ChartType.StackedBar" ChartSeries="@Series1" XAxisLabels="@XAxisLabels" Width="100%" Height="350px" ChartOptions="@_options1"></MudChart>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudChart ChartType="ChartType.StackedBar" ChartSeries="@Series1" XAxisLabels="@XAxisLabels" Width="100%" Height="350px" ChartOptions="@_options2"></MudChart>
    </MudItem>
</MudGrid>


@code {
    public static string __description__ = "Charts with custom colors using ChartOptions.";

    public double[] Data = [50, 25, 20, 5, 16, 14, 8, 4, 2, 8, 10, 19, 8, 17, 6, 11, 19, 24, 35, 13, 20, 12];

    public string[] Labels =
    [
        "Deep Sea Blue", "Venetian Red", "Banana Yellow", "La Salle Green", "Rich Carmine", "Shiraz", "Cloud Burst",
        "Neon Pink", "Ocean", "Orangey Red", "Catalina Blue", "Fountain Blue", "Irish Green", "Wild Strawberry",
        "Geraldine", "Grey Teal", "Baby Pink", "Thunderbird", "Navy", "Aqua Marina", "Lavender Pinocchio", "Deep Sea Blue"
    ];

    public List<ChartSeries> Series1 =
    [
        new() { Name = "Deep Sea Blue", Data = [40, 20, 25, 27, 46] },
        new() { Name = "Venetian Red", Data = [19, 24, 35, 13, 28] },
        new() { Name = "Banana Yellow", Data = [8, 6, 11, 13, 4] },
        new() { Name = "La Salle Green", Data = [18, 9, 7, 10, 7] },
        new() { Name = "Rich Carmine", Data = [9, 14, 6, 15, 20] },
        new() { Name = "Shiraz", Data = [9, 4, 11, 5, 19] },
        new() { Name = "Cloud Burst", Data = [14, 9, 20, 16, 6] },
        new() { Name = "Neon Pink", Data = [14, 8, 4, 14, 8] },
        new() { Name = "Ocean", Data = [11, 20, 13, 5, 5] },
        new() { Name = "Orangey Red", Data = [6, 6, 19, 20, 6] },
        new() { Name = "Catalina Blue", Data = [3, 2, 20, 3, 10] },
        new() { Name = "Fountain Blue", Data = [3, 18, 11, 12, 3] },
        new() { Name = "Irish Green", Data = [20, 5, 15, 16, 13] },
        new() { Name = "Wild Strawberry", Data = [15, 9, 12, 12, 1] },
        new() { Name = "Geraldine", Data = [5, 13, 19, 15, 8] },
        new() { Name = "Grey Teal", Data = [12, 16, 20, 16, 17] },
        new() { Name = "Baby Pink", Data = [1, 18, 10, 19, 8] },
        new() { Name = "Thunderbird", Data = [15, 16, 10, 8, 5] },
        new() { Name = "Navy", Data = [16, 2, 3, 5, 5] },
        new() { Name = "Aqua Marina", Data = [17, 6, 11, 19, 6] },
        new() { Name = "Lavender Pinocchio", Data = [1, 11, 4, 18, 1] },
        new() { Name = "Deep Sea Blue", Data = [1, 11, 4, 18, 1] }
    ];

    public List<ChartSeries> Series2 =
    [
        new() { Name = "Deep Sea Blue", Data = [40, 20, 25, 27, 46] },
        new() { Name = "Venetian Red", Data = [19, 24, 35, 13, 28] },
        new() { Name = "Banana Yellow", Data = [8, 6, 11, 13, 4] }
    ];

    public string[] XAxisLabels = ["1", "2", "3", "4", "5"];


    private readonly ChartOptions _options1 = new()
    {
        ChartPalette =
        [
            "#015482", "#CC1512", "#FFE135", "#087830", "#D70040", "#B20931", "#202E54", "#F535AA", "#017B92",
            "#FA4224", "#062A78", "#56B4BE", "#207000", "#FF43A4", "#FB8989", "#5E9B8A", "#FFB7CE", "#C02B18",
            "#01153E", "#2EE8BB", "#EBDDE2"
        ],
    };

    private readonly ChartOptions _options2 = new()
    {
        ChartPalette = ["#5bdfeb"],
        ShowLegend = false
    };
}